<template>
	<view class="xl-read-more">
		<view class="xl-read-more__content" :style="{ height: contentHeight > showHeight && status === 'close' ? $xl.parseUnit(showHeight, 'rpx') : contentHeight + 'px' }">
			<view :class="[contentId]" :style="{padding: $xl.parseUnit(padding, 'rpx')}">
				<slot></slot>
			</view>
		</view>
		<view v-if="contentHeight > showHeight && showClose" :class="['xl-read-more__switch', status === 'close' ? 'close' : '']" @tap="toggleMore">
			<view class="xl-read-more__switch-text" :style="{fontSize: $xl.parseUnit(fontSize, 'px')}">{{status === 'close' ? closeText : openText}}</view>
			<xl-icon :name="status === 'close' ? 'xl-down-bold' : 'xl-up-bold'" :color="color" :size="fontSize" left="10"></xl-icon>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed, getCurrentInstance } from 'vue'
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['open', 'close'])
	
	const status = ref('close')
	const contentId = ref(uni.$xl.guid())
	
	const contentHeight = ref(100)
	const instance = getCurrentInstance();
	
	onMounted(()=>{
		uni.createSelectorQuery().in(instance).select('.'+contentId.value).boundingClientRect((data) => {
			contentHeight.value = data.height;
		}).exec();
	})
	
	const showClose = ref(true)
	function toggleMore(){
		status.value = status.value === 'close' ? 'open' : 'close'
		// 如果close为false，隐藏"收起"部分的内容
		if (props.close == false) showClose.value = false
		emits(status.value)
	}
	
</script>

<style lang="scss" scoped>
	.xl-read-more {

		&__content {
			overflow: hidden;
			transition: height 0.5s;
		}
		
		&__switch {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: center;
			position: relative;
			color: v-bind(color);
			
			&.close{
				background: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%);
				padding-top: 100px;
				margin-top: -100px;
			}
		
			&__text {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin-top: 5px;
			}
		}
	}
</style>